<template>
  <div>
    <TradeDlg
      v-if="dialog.show"
      :dialog="dialog"
      :formData="formData"
      @dlgChange="closeDlg"
    ></TradeDlg>
    <AccTrade v-if="accDlg.show" :dialog="accDlg" @dlgChange="closeAccTrade">
    </AccTrade>

    <div class="fillContainer">
      <el-button
        :type="acc_id === item.acc_id ? 'danger' : 'primary'"
        size="small"
        v-for="(item, key) in accounts"
        :key="key"
        :loading="loading"
        @click="
          acc_id = item.acc_id;
          getFund();
        "
        >{{ item.name }}</el-button
      >
      <el-button
        type="primary"
        size="small"
        @click="showTradePanel"
        class="btnRight"
        >基金申购</el-button
      >
      <el-button
        type="primary"
        size="small"
        @click="showAccTrade"
        class="btnRight"
        >余额操作</el-button
      >
    </div>
    <div>
      <div class="table_container">
        <el-table
          :data="allTableData"
          border
          style="width: 100%"
          max-height="450"
        >
          <el-table-column prop="fund" label="代码" width="100" align="center">
            <template #default="scope">
              <a
                :href="'http://fund.eastmoney.com/' + scope.row.fund + '.html'"
                target="_blank"
                >{{ scope.row.fund }}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" width="250">
          </el-table-column>
          <el-table-column
            prop="begin_date"
            label="起始日期"
            width="100"
          ></el-table-column>
          <el-table-column prop="hold_num" label="持有数量" align="center">
          </el-table-column>
          <el-table-column prop="hold_cost" label="持有成本" align="center">
          </el-table-column>
          <el-table-column
            prop="worth_date"
            label="净值日期"
            align="right"
            width="100"
          >
          </el-table-column>
          <el-table-column prop="unit_worth" label="净值" align="center">
          </el-table-column>
          <el-table-column prop="mkt_value" label="市值" align="center">
            <template #default="scope">
              <span style="color: #4db3ff">{{
                scope.row.mkt_value.toFixed(2)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ratio" label="市值占比(%)" align="center">
            <template #default="scope">
              <span style="color: #4db3ff">{{
                scope.row.ratio.toFixed(2)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="浮动收益" align="center">
            <template #default="scope">
              <span :class="scope.row.float_profit >= 0 ? 'red' : 'green'">{{
                scope.row.float_profit.toFixed(2)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="浮动收益率(%)" align="center">
            <template #default="scope">
              <span :class="scope.row.float_p_rate >= 0 ? 'red' : 'green'">{{
                scope.row.float_p_rate.toFixed(2)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="年化收益率(%)" align="center">
            <template #default="scope">
              <span :class="scope.row.y_rate >= 0 ? 'red' : 'green'">{{
                scope.row.y_rate.toFixed(2)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="乖离率(%)" align="center">
            <template #default="scope">
              <span :class="scope.row.bias >= 0 ? 'red' : 'green'">{{
                scope.row.bias.toFixed(2)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="advise" label="操作建议" align="center">
          </el-table-column>
          <el-table-column
            prop="operation"
            align="center"
            label="操作"
            width="100"
          >
            <template #default="scope">
              <el-button
                icon="edit"
                @click="handleTrade(scope.$index, scope.row)"
                type="warning"
                size="small"
              >
                交易
              </el-button>
              <el-button
                icon="delete"
                v-if="!scope.row.hold_num"
                @click="handleTrade(scope.$index, scope.row)"
                type="danger"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-if="acc_info" class="fillContainer">
        <el-form :model="acc_info" label-width="90px">
          <el-row :gutter="0">
            <el-col :span="3">
              <el-form-item label="余额">
                <span>{{ acc_info.balance }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="市值">
                <span>{{ acc_info.mkt_value }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="合计">
                <span>{{ acc_info.total }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="累计收益">
                <span>{{ acc_info.all_profit }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="年化收益率">
                <span>{{ acc_info.y_rate }}%</span>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="浮动收益">
                <span>{{ acc_info.float_profit }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="浮动收益率">
                <span>{{ acc_info.float_p_rate }}%</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getFundHold } from "@/apis/fund";
import { ref, onMounted, getCurrentInstance } from "vue";
import TradeDlg from "./Components/TradeDlg";
import AccTrade from "@/views/Fund/Components/AccTrade";

export default {
  name: "fundHold",
  components: { TradeDlg, AccTrade },
  setup() {
    const { proxy } = getCurrentInstance();
    const acc_id = ref("");
    const acc_info = ref();
    const accounts = ref();
    const loading = ref(false);
    let allTableData = ref();
    const dialog = ref({
      show: false,
      onlyBuy: false,
      name: false
    });
    // 账户交易参数
    const accDlg = ref({
      show: false,
      acc_id: acc_id.value
    });
    let formData = ref({
      acc_id: "",
      fund: "",
      money: 0,
      number: 0,
      operation: ""
    });
    // 基金申购
    const handleTrade = (index, row) => {
      dialog.value.show = true;
      dialog.value.onlyBuy = false;
      dialog.value.name = false;

      formData.value.acc_id = acc_id.value;
      formData.value.fund = row.fund;
      formData.value.name = row.name;
      formData.value.money = 0;
      formData.value.number = 0;
      formData.value.way = "";
    };
    const showTradePanel = () => {
      dialog.value.show = true;
      dialog.value.onlyBuy = true;
      dialog.value.name = true;

      formData.value.acc_id = acc_id.value;
      formData.value.fund = "";
      formData.value.name = "";
      formData.value.money = 0;
      formData.value.number = 0;
      formData.value.way = "申购";
    };
    const showAccTrade = () => {
      accDlg.value.show = true;
      accDlg.value.acc_id = acc_id.value;
    };
    let getFund = () => {
      loading.value = true;

      allTableData.value = null;
      acc_info.value = null;
      getFundHold(acc_id.value)
        .then(res => {
          allTableData.value = res.data.funds;
          acc_info.value = res.data.acc_info;
          console.log(allTableData.value);
        })
        .catch(err => {
          console.log(err);
        });
      loading.value = false;
    };
    const closeDlg = refresh => {
      if (refresh) {
        getFund();
      }
      dialog.value.show = false;
    };
    const closeAccTrade = refresh => {
      if (refresh) {
        getFund();
      }
      accDlg.value.show = false;
    };
    onMounted(() => {
      proxy.$store.dispatch("app/getAccIds").then(response => {
        accounts.value = response.data;
        acc_id.value = accounts.value[0].acc_id;
        getFund();
      });
    });
    return {
      showTradePanel, // 显示基金交易框
      getFund,
      handleTrade,
      closeDlg,
      showAccTrade, // 显示转账框
      closeAccTrade, // 关闭转账框
      dialog,
      formData,
      allTableData,
      acc_id,
      acc_info,
      accounts,
      accDlg,
      loading
    };
  }
};
</script>

<style scoped>
.red {
  color: #f56767;
}
.green {
  color: #00d053;
}
.fillContainer {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.btnRight {
  float: right;
}
.pagination {
  text-align: right;
  margin-top: 10px;
}
a {
  text-decoration: none;
}
/*正常的未被访问过的链接*/
a:link {
  text-decoration: none;
}
/*已经访问过的链接*/
a:visited {
  text-decoration: none;
}
/*鼠标划过(停留)的链接*/
a:hover {
  text-decoration: none;
}
/* 正在点击的链接*/
a:active {
  text-decoration: none;
}
</style>
